﻿<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/home-template.dwt" codeOutsideHTMLIsLocked="false" -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>导航</title>
    ﻿@using Store.Models.Database
    <!-- InstanceBeginEditable name="MainBody" -->
    <link rel="stylesheet" type="text/css" href="/css/public.css" />
    <link rel="stylesheet" type="text/css" href="/css/home-nav.css" />
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
</head>

<body>
  
    <!-- 意见反馈 -->
    <div class="question white-panel"
         style="position: absolute;top: 300px;left: 30%;z-index:1; width: 500px;display:none;" id="question">
        <div id="" style="display: block;position: absolute;right: 10px;top:10px" onclick="ideaFormClose()">
            <img src="/img/icon/iconmonstr-x-mark-7-240.png" width="24" height="24">
        </div>
        <h3 style="text-align: center;line-height: 32px;margin: 20px 0;">
            意见反馈
        </h3>
        <form action="#" method="post" class="form">
            <div class="form-item">
                <span>
                    姓名：
                </span>
                <input type="text" name="" id="" value="" />
            </div>
            <div class="form-item">
                <span>
                    联系方式：
                </span>
                <input type="text" name="" id="" value="" />
            </div>
            <div class="form-item">
                <span>
                    问题：
                </span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <textarea rows="10" cols="27">
          </textarea>
            </div>
            <div class="btn-goup" style="display: block;">
                <button type="button" class="submit-btn">
                    提交
                </button>
                <button type="reset" class="submit-btn">
                    重置
                </button>
            </div>
        </form>
    </div>
    <!-- 、意见反馈 -->
    <div class="container">
        <!-- InstanceBeginEditable name="MainBody" -->
        <link rel="stylesheet" type="text/css" href="/css/household.css" />
        <link rel="stylesheet" type="text/css" href="/css/goods-item.css" />
        <div class="phone-market">
            <div class="banner">
                <div class="xgs-row">
                    <img src="/img/household/banner.png" width="100%" height="300">
                </div>
            </div>
        </div>
        <!--  -->
        <div class="household-container  goods-item">
            <div class="xgs-row" style="padding: 0;background-color: white;">
                <ul class="household-navtab" style="display: inline-block;">
                    @*
        cshtml cs(csharp) c#  + html
        1、@语句/变量
        2、@{}  应用于多行C#编写
                    *@
                    @*3、接收数据*@
                    @{
                        //             参数的名字Cates跟传过来的是一致是的
                        //           把动态类型转换成 对象类型  分类列表
                        var cates = ViewData["Cates"] as List<Category>;
                        //循环遍历一个列表
                        foreach (var item in cates)
                        {
                            @*                                @item.CateName *@
                            if (item.Id == (int)ViewData["CateId"])
                            {
                                <li><a style="background-color: #69c0ff;color: white;" href="/market.html?cateId=@item.Id">@item.CateName</a></li>
                            }
                            else
                            {
                                <li><a href="/market.html?cateId=@item.Id">@item.CateName</a></li>
                            }
                        }
                    }
                    @*<li><a href="javascript:void(0);">文学</a></li>
        <li><a href="javascript:void(0);">社科</a></li>
        <li><a href="javascript:void(0);">经管</a></li>
        <li><a href="javascript:void(0);">少儿</a></li>
        <li><a href="javascript:void(0);">文教</a></li>
        <li><a href="javascript:void(0);">科技</a></li>
        <li><a href="javascript:void(0);">艺术</a></li>*@
                </ul>
            </div>

            <div class="tab-item white-panel" style="padding: 20px 0;margin-top: 20px;">
                <!-- 文学 -->
                <div id="wenxue" class="wenxue">
                    @*循环 11次 每次 *@
                    @{
                        // * * * *
                        // * * * *
                        // * * * *
                        // * * * *
                        var goods = ViewData["Goods"] as List<Good>;
                        //循环的次数 商品总数/4 + 1
                        var row = goods.Count / 4 + 1;
                        for (int i = 1; i <= row; i++)
                        {
                            //循环行数
                            <div class="xgs-row">
                                @*
                    分页 跳过Skip N个 取Take N个
                    1 2 3 4  1
                    5 6 7 8  2
                    .。。。   3
                    41
                                *@
                                @{
                                    //
                                    //一行4个商品
                                    var list = goods.Skip((i - 1) * 4).Take(4).ToList();
                                    foreach (var item in list)
                                    {
                                        //把每个商品的html标签循环 同时把显示字段替换
                                        <div class="xgs-col4">
                                          <a href="detail.html?id=@item.Id">
                                                <div>
                                                    <img src="@item.Cover" alt="" />
                                                    <span class="goods-title">
                                                        @item.Name
                                                    </span>
                                                    <p class="price">￥@item.Price</p>
                                                </div>
                                            </a>
                                        </div>
                                    }
                                }
                            </div>
                                        }
                                    }


                            <div class="xgs-row">
                                <div class="xgs-col4">
                                    <a href="detail.html">
                                        <div>
                                            <img src="/img/phone-market/xiaomi11.jpg" alt="" />
                                            <span class="goods-title">小米11青春版 骁龙780G处理器AMOLED柔性直屏5G手机 清甜荔枝 8GB+128GB</span>
                                            <p class="price">￥1999.00</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="xgs-col4">
                                    <a href="detail.html">
                                        <div>
                                            <img src="/img/phone-market/xiaomimix4.jpg" alt="" />
                                            <span class="goods-title">
                                                小米 MIX4 骁龙888+ 一体化陶瓷机身 全面屏 一亿像素三摄 哈曼卡顿双扬声器 8GB+128GB
                                                陶瓷黑
                                                5G旗舰手机
                                            </span>
                                            <p class="price">￥5799.00</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="xgs-col4">
                                    <a href="detail.html">
                                        <div>
                                            <img src="/img/phone-market/xiaomi11-ultra.jpg" alt="" />
                                            <span class="goods-title">
                                                小米11 Ultra 至尊 5G 骁龙888 2K AMOLED四曲面柔性屏 陶瓷工艺 12GB+256GB
                                                白色
                                                游戏手机
                                            </span>
                                            <p class="price">￥5999.00</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="xgs-col4">
                                    <a href="detail.html">
                                        <div>
                                            <img src="/img/phone-market/xiaomi10s.jpg" alt="" />
                                            <span class="goods-title">
                                                小米10S 5G新品手机【现货速发】 全网通 8G+128G 蓝色
                                                官方标配【原装33W充电套装+晒单20红包】
                                            </span>
                                            <p class="price">￥2699.00</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                <!-- /文学 -->
            </div>
        </div>
        <!-- InstanceEndEditable -->
    </div>
    <div class="footer">
        <div class="foot-body" style="margin: auto;width: 61%;">
            <ul>
                <li><a href="about.html">常见问题</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li>客服QQ：1919399938</li>
                <li>客服微信：xgs39938</li>
            </ul>
            <p style="color: white;clear: left;text-align: center;">
                Copyright © 2012-2021 Tencent. All Rights Reserved.
            </p>
        </div>

    </div>
    <script src="/js/public.js" type="text/javascript" charset="utf-8">
    </script>
</body>

<!-- InstanceEnd -->

</html>